$(() => {
  // 🎃 初始化搜索接口所需参数
  const params = {
    key: '', // 搜索关键词，可以为空，为空返回某类型所有文章
    type: '', // 文章类型id，可以为空，为空返回所有类型文章
    state: '', // 文章状态，草稿 ，已发布,为空返回所有状态文章
    page: 1, // 当前页，为空返回第1页
    perpage: 10, // 每页显示条数，为空默认每页6条
  }

  // 1.0 获取文章列表
  getList()
  // 1.1 封装方便后续重复调用
  function getList() {
    // 1.2 文章搜索接口调用获取文章数据
    $.ajax({
      type: 'get',
      url: '/admin/article/query',
      data: params, // 🎃 接口参数
      success: (res) => {
        console.log(res)
        // 1.3.3 调用模板引擎
        const htmlStr = template('temp_tr', res.data)
        // console.log(htmlStr);
        // 1.3.4 模板渲染到页面中
        $('tbody').html(htmlStr)
        // 调用分页器
        const totalCount = res.data.totalCount
        // console.log(totalCount);
        // 调用分页器，生成一个分页器实例显示到页面中
        layerPager(totalCount)
      },
    })
  }

  // 2.0 动态获取类别列表
  $.ajax({
    type: 'get',
    url: '/admin/category/list',
    success: (res) => {
      // console.log(res)
      // 调用模板
      const htmlStr = template('cate_item', res)
      // console.log(htmlStr);
      // 渲染模板
      $('#selCategory').html(htmlStr)
    },
  })

  // 3.0 点击筛选按钮
  $('#btnSearch').on('click', (e) => {
    // 3.1 阻止表单默认提交行为
    e.preventDefault()
    // console.log(1111)
    // 3.2 更新搜索接口所需的参数
    params.type = $('#selCategory').val()
    params.state = $('#selStatus').val()
    // 🎃 Bug修复：点击筛选的时候，页码重置为第一页
    params.page = 1
    // 3.3 重新获取文章列表
    getList()
  })

  // 4.0 layerUI 的分页功能
  function layerPager(totalCount) {
    layui.use('laypage', function () {
      var laypage = layui.laypage
      // 执行一个 laypage 分页实例
      laypage.render({
        elem: 'pager', // 注意，这里的 pager 是 ID，不用加 # 号
        count: totalCount, // 数据总数，从服务端得到
        limit: params.perpage, // 每页显示的条数。页容量
        curr: params.page, // 颜色高亮的页
        // 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
        jump: function (obj, first) {
          //obj包含了当前分页的所有参数，比如：
          console.log(obj.curr) // 得到当前页，以便向服务端请求对应页的数据。
          // console.log(obj) //得到每页显示的条数
          // 更新请求的页码参数
          params.page = obj.curr
          // 首次不执行
          if (!first) {
            // 🎃 重新获取列表数据，注意书写位置，否则容易出现死循环
            getList()
          }
        },
      })
    })
  }

  // 5.0 删除文章
  $('tbody').on('click', '.btn_delete', function () {
    // 5.1 获取删除按钮的 id
    const id = $(this).attr('data-id')
    // console.log(id)
    // 5.2 弹出层 - 询问框
    layer.confirm('是否删除？', (index) => {
      // 关闭当前的询问框
      layer.close(index)
      // 发送请求删除文章
      $.ajax({
        type: 'post',
        url: '/admin/article/delete',
        data: { id },
        success: (res) => {
          console.log(res)
          // 轻提示
          layer.msg(res.msg)
          // 重新获取列表
          getList()
        },
      })
    })
  })
  
})
